// pages/guidanceStudy/payment/payment.js

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ratio: app.phoneInfo.ratio,
    alertType: false,
    second: 10,
    submitType: true,
    orderId: '',
    agent_info: null,
    order_info: null,
    shareTempFilePath: '',
    showDialog: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      orderId: options.orderId
    });
    wx.showLoading({
      title: '拼命加载中...',
      icon: 'none'
    });
    wx.request({
      url: app.globalData.url + 'c=order&m=getPayInfo',
      data: {
        user_id: wx.getStorageSync('user_id'),
        order_sn: options.orderId
      },
      success: res => {
        res = res.data;
        if (res.status == 200) {
          this.setData({
            'agent_info': res.data.agent_info,
            'order_info': res.data.order_info
          });
          this.getImage();
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      },
      fail: err => {
        wx.hideLoading();
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    
  },

  /**
   * 获取图片
   */
  getImage: function() {
    wx.getImageInfo({
      src: this.data.agent_info.logo,
      success: img1 => {
        wx.getImageInfo({
          src: this.data.order_info.pay_qr_code,
          success: img2 => {
            wx.getImageInfo({
              src: this.data.agent_info.wx_head,
              success: img3 => {
                this.drawImg(img1, img2, img3);
              }
            })
          }
        })
      }
    });
  },

  /**
   * canvas绘制
   */
  drawImg: function(img1, img2, img3) {
    var context = wx.createCanvasContext('share');
    context.fillStyle = '#F1F1F1';
    context.shadowColor = "#E5E5E5"; 
    context.fillRect(0, 0, 620 / this.data.ratio, 1065 / this.data.ratio);

    let canvasWidthPx = 620 / this.data.ratio;
    let canvasHeightPx = 1065 / this.data.ratio;
    context.drawImage("/images/payment-share-bg.png", 0, 0 , canvasWidthPx, canvasHeightPx);
    
    let img1X = (620 - img1.width) / this.data.ratio / 2;
    let img1Y = (113-75) / this.data.ratio;
    context.drawImage(img1.path, img1X, img1Y, img1.width / this.data.ratio, img1.height / this.data.ratio);
 
    context.save();
    context.beginPath();
    context.arc((180-65) / this.data.ratio, (356 -75 ) / this.data.ratio, 50 / this.data.ratio, 0, Math.PI * 2, false);
    context.setStrokeStyle('#e0e0e0');
    context.stroke();
    context.clip();
    context.drawImage('/images/initial-avatar.png', (130-65) / this.data.ratio, (306-75) / this.data.ratio, 100 / this.data.ratio, 100 / this.data.ratio);
    context.restore();

    context.drawImage('/images/avatar-bg-active.png', (104-65) / this.data.ratio, (306-75) / this.data.ratio, 154 / this.data.ratio, 127 / this.data.ratio);

    context.setFontSize(26 / this.data.ratio);
    context.setTextAlign('left');
    context.setFillStyle('#999999');
    context.fillText(this.data.order_info.read_name, (420-65) / this.data.ratio, (328-75) / this.data.ratio);
    context.fillText(this.data.order_info.read_phone, (420-65) / this.data.ratio, (372-75) / this.data.ratio);
    context.fillText(this.data.order_info.professional_name.substr(0, 9) + '...', (420 - 65) / this.data.ratio, (414-75) / this.data.ratio);
    context.fillText(this.data.order_info.create_time, (420 - 65) / this.data.ratio, (458-75) / this.data.ratio);
    
    context.setFontSize(60 / this.data.ratio);
    context.setTextAlign('center');
    context.setFillStyle('#e63a3a');
    context.fillText('￥' + this.data.order_info.paid_money, (375-65) / this.data.ratio, (618-75) / this.data.ratio);

    context.setFontSize(28 / this.data.ratio);
    context.setTextAlign('center');
    context.setFillStyle('#666666');
    context.fillText('已享受补贴，学费减免￥' + this.data.order_info.breaks_money + '元', (375-65) / this.data.ratio, (673-75) / this.data.ratio);

    let img2X = (295-65) / this.data.ratio;
    let img2Y = (738-75) / this.data.ratio;
    context.drawImage(img2.path, img2X, img2Y, 160 / this.data.ratio, 160 / this.data.ratio);

    context.save();
    context.beginPath();
    context.arc((155-65) / this.data.ratio, (1072-75) / this.data.ratio, 50 / this.data.ratio, 0, Math.PI * 2, false);
    context.setStrokeStyle('#e0e0e0');
    context.stroke();
    context.clip();
    context.drawImage(img3.path, (105-65) / this.data.ratio, (1023-75) / this.data.ratio, 100 / this.data.ratio, 100 / this.data.ratio);
    context.restore();

    context.setFontSize(26 / this.data.ratio);
    context.setTextAlign('left');
    context.setFillStyle('#ffffff');
    context.fillText('本报读由招生顾问 ' + this.data.agent_info.agent_name + ' 为你创建', (235-65) / this.data.ratio, (1060-75) / this.data.ratio);
    context.fillText('他已经顺利为您争取到学费补贴！', (235-65) / this.data.ratio, (1100-75) / this.data.ratio);

    context.draw(false, this.getTempFilePath);
  },

  /**
   * 获取临时路径
   */
  getTempFilePath: function() {
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
        wx.hideLoading();
      }
    })
  },

  /**
   * 保存相册
   */
  saveImageToPhotosAlbum: function () {
    var that = this;
    if (!this.data.shareTempFilePath) {
      wx.showModal({
        title: '提示',
        content: '图片绘制中，请稍后重试',
        showCancel: false
      })
    }
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.save();
            },
            fail(err) {
              that.setData({
                'showDialog': true
              })
            }
          })
        } else {
          that.save();
        }
      }
    })
  },

  save: function () {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareTempFilePath,
      success: (res) => {
        this.setData({
          alertType: true
        })
        this.waitTime();
      },
      fail: (err) => {
        console.log(err);
      }
    })
  },

  /**
   * 倒计时
   */
  waitTime: function () {
    let s = this.data.second;
    var timer = setInterval(() => {
      s--;
      if (s == 0) {
        clearInterval(timer);
        timer = null;
        this.setData({
          submitType: false
        })
      } else {
        this.setData({
          second: s
        });
      }
    }, 1000);

    // setTimeout(this.waitTime, 1000);
  },

  /**
   * 关闭弹窗
   */
  closeAlert: function() {
    this.setData({
      alertType: false,
      submitType: true,
      second: 10
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})